<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <div id="tab" class="box">  
        <ul>  
            <li class="active"><h2>1</h2><p>1月</p></li>  
            <li><h2>2</h2><p>2月</p></li>  
            <li><h2>3</h2><p>3月</p></li>  
            <li><h2>4</h2><p>4月</p></li>  
            <li><h2>5</h2><p>5月</p></li>  
            <li><h2>6</h2><p>6月</p></li>  
            <li><h2>7</h2><p>7月</p></li>  
            <li><h2>8</h2><p>8月</p></li>  
            <li><h2>9</h2><p>9月</p></li>  
            <li><h2>10</h2><p>10月</p></li>  
            <li><h2>11</h2><p>11月</p></li>  
            <li><h2>12</h2><p>12月</p></li>  
        </ul>  
        
            <div class="text" id="txt">
                
                    <h3>1月</h3>
                    <p>元旦放假，新年快乐！</p>
                

    </div> 
      
              
    </div>  
    </body>
    <style type="text/css">  
    * { padding: 0;margin: 0; }  
      
    li { list-style: none; }  
      
    body { background: #f6f9fc; font-family: arial; }  
      
    .box { width: 210px;  
                margin: 50px auto 0;   
                padding: 10px 10px 20px 20px;   
                background: #eae9e9; }  
                  
    .box ul { width: 210px;   
                   overflow: hidden;   
                   padding-bottom: 10px; }  
                     
    .box li { float: left;  
                   width: 58px;   
                   height: 54px;   
                   margin: 10px 10px 0 0;   
                   border: 1px solid #fff;   
                   background: #424242;  
                   color: #fff;   
                   text-align: center;   
                   cursor: pointer; }  
                     
    .box li h2 { font-size: 20px; padding-top: 5px; }  
      
    .box li p { font-size: 14px; }  
      
    .box .active { border: 1px solid #424242;  
                        background: #fff;  
                        color: #e84a7e; }  
                          
    .box .active h2 { }  
      
    .box .active p { font-weight: bold; }  
      
    .box .text { width: 178px;   
                      padding: 0 10px 10px;  
                      border: 1px solid #fff;   
                      padding-top: 10px;   
                      background: #f1f1f1;   
                      color: #555; }  
                        
    .box .text h2 {font-size: 14px; margin-bottom: 10px; }  
      
    .box .text p { font-size: 12px; line-height: 18px; }  
    </style>
    <script type="text/javascript">  
         

         var arr = [
    {
        title:"1月",
        content:"刚去公司"
    },
    {
        title:"2月",
        content:"占领工位"
    },
    {
        title:"3月",
        content:"锁住电脑"
    },
    {
        title:"4月",
        content:"升职涨薪"
    },
    {
        title:"5月",
        content:"工作好累"
    },
    {
        title:"6月",
        content:"压力山大"
    },
    {
        title:"7月",
        content:"好想逃离"
    },
    {
        title:"8月",
        content:"状态好转"
    },
    {
        title:"9月",
        content:"熬过来了"
    },
    {
        title:"10月",
        content:"日渐舒适"
    },
    {
        title:"11月",
        content:"生活滋润"
    },
    {
        title:"12月",
        content:"头发掉光"
    },
];

var oLis = document.querySelectorAll('.box ul li');
var titleBox = document.querySelector('.box>.text>h3');
var contentBox = document.querySelector('.box>.text>p');

for(var i=0;i<oLis.length;i++){

    oLis[i].index = i
    oLis[i].onmouseover = function(){
  
        for(var j=0;j<oLis.length;j++){
            oLis[j].className = '';
        }
      
        this.className = 'active'
      
        var data = arr[this.index]
 
        titleBox.innerText = data.title
        contentBox.innerText = data.content
    }
}
    </script>
</html>